<template>
	<view class="cart-box">
		<view class="cart-box-left">
			<radio :checked="goods.goods_state" color="#008000" v-if="showRadio" @click="radioClickHandler"></radio>
			<image :src="goods.goods_icon||defaultPic"></image>
		</view>
		<view class="cart-box-right">
			<text>{{goods.goods_name}}</text>
			<view class="price-count">
				<text>￥{{goods.goods_price}}</text>
				<uni-number-box v-if="showNum" :min="1" :value="goods.goods_count" @change="numberChangeHandler"></uni-number-box>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-cart",
		data() {
			return {
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			};
		},
		props:{
			// 每个商品的信息对象，都包含如下 6 个属性：
			// { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
			goods:{
				type:Object,
				default:null
			},
			showRadio:{
				type:Boolean,
				default:false
			},
			showNum:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			radioClickHandler(){
				this.$emit('radio-change', {
			      // 商品的 Id
				  goods_id: this.goods.goods_id,
				  // 商品最新的勾选状态
				  goods_state: !this.goods.goods_state
				})
			},
			numberChangeHandler(val){
				val = parseInt(val)
				if(!val){
					val=-1
				}
				this.$emit('number-change',{
					goods_id:this.goods.goods_id,
					goods_count:val
				})
			}
		}
	}
</script>

<style lang="scss">
	.cart-box{
		display: flex;
		align-items: center;
		border: #efefef 1px solid;
		.cart-box-left{
			image{
				height: 100px;
				width: 100px;
			}
		}
		.cart-box-left{
			display: flex;
			align-items: center;
		}
		.cart-box-right{
			font-size: 12px;
			height: 100px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 10px;
			.price-count{
				font-size: 20px;
				color: #008000;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>